<script setup>
import {onMounted, ref} from 'vue'
import axios from 'axios'

const randomSentence = ref('')
const isLoading = ref(true)
const getSentenceUrl = 'https://v2.xxapi.cn/api/yiyan?type=hitokoto'

const getSentence = () => {
  isLoading.value = true
  axios({
    method: 'get',
    url: getSentenceUrl
  })
      .then(function (response) {
        console.log(JSON.stringify(response.data))
        if (response.data.code === 200) {
          setTimeout(() => {
            randomSentence.value = response.data.data
            isLoading.value = false
          }, 500) // 添加短暂延迟让加载动画可见
        }
      })
      .catch(function (error) {
        console.log(error)
        isLoading.value = false
        randomSentence.value = "获取句子失败，请刷新重试"
      })
}

onMounted(()=>{
  getSentence()
})
//
// axios({
//   method: 'get',
//   url: getSentenceUrl
// })
//     .then(function (response) {
//       console.log(JSON.stringify(response.data))
//       if (response.data.code === 200) {
//         setTimeout(() => {
//           randomSentence.value = response.data.data
//           isLoading.value = false
//         }, 500) // 添加短暂延迟让加载动画可见
//       }
//     })
//     .catch(function (error) {
//       console.log(error)
//       isLoading.value = false
//       randomSentence.value = "获取句子失败，请刷新重试"
//     })
</script>

<template>
  <div class="sentence-container" @click="getSentence">
    <div class="sentence-card" :class="{ loading: isLoading }">
      <div class="quote-icon top">“</div>

      <div class="sentence-content">
        <template v-if="isLoading">
          <div class="loading-animation">
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
          </div>
        </template>
        <template v-else>
          <p>{{ randomSentence }}</p>
        </template>
      </div>

      <div class="quote-icon bottom">”</div>

      <div class="sentence-footer">
<!--        <span @click="getSentence" class="refresh-hint">每日一句 · 点击刷新</span>-->
      </div>
    </div>
  </div>
</template>

<style scoped>
.sentence-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.sentence-card {
  position: relative;
  max-width: 1000px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.sentence-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.sentence-card.loading {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote-icon {
  position: absolute;
  font-size: 60px;
  color: rgba(0, 0, 0, 0.1);
  font-family: Georgia, serif;
  line-height: 1;
}

.quote-icon.top {
  top: 10px;
  left: 20px;
}

.quote-icon.bottom {
  bottom: 10px;
  right: 20px;
}

.sentence-content {
  padding: 20px 40px;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  text-align: center;
  font-family: 'Noto Serif SC', serif;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-animation {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #7a9cc6;
  animation: bounce 1.4s infinite ease-in-out;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
}

.sentence-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #7a9cc6;
  font-style: italic;
}

.refresh-hint {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.sentence-card:hover .refresh-hint {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sentence-card {
    padding: 20px;
  }

  .sentence-content {
    padding: 15px 20px;
    font-size: 16px;
  }

  .quote-icon {
    font-size: 50px;
  }
}
</style>